<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :okButtonProps="{ disabled: disabled }"
    cancelText="关闭">
    
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
      
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="所属楼栋">
          <a-select placeholder="请选择楼栋" v-decorator="['buildingId', {rules: [{ required: true, message: '请选择所属楼栋!' }]}]" :disabled="disabled">
            <a-select-option v-for="building in buildingList" :key="building.id" :value="building.id">
              {{ building.buildingName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="房间编号">
          <a-input placeholder="请输入房间编号" v-decorator="['roomCode', {rules: [{ required: true, message: '请输入房间编号!' }]}]" :disabled="disabled" />
        </a-form-item>
        
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="楼层">
          <a-input-number v-decorator="['floor', {rules: [{ required: true, message: '请输入楼层!' }]}]" :min="1" :max="100" style="width: 100%" :disabled="disabled" />
        </a-form-item>
        
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="房间类型">
          <a-select placeholder="请选择房间类型" v-decorator="['roomType', {rules: [{ required: true, message: '请选择房间类型!' }]}]" :disabled="disabled">
            <a-select-option value="单人间">单人间</a-select-option>
            <a-select-option value="双人间">双人间</a-select-option>
            <a-select-option value="标准间">标准间</a-select-option>
            <a-select-option value="套间">套间</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="床位数">
          <a-input-number v-decorator="['bedCount', {rules: [{ required: true, message: '请输入床位数!' }]}]" :min="1" :max="8" style="width: 100%" :disabled="disabled" />
        </a-form-item>
        
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="状态">
          <a-select placeholder="请选择状态" v-decorator="['status', {rules: [{ required: true, message: '请选择状态!' }]}]" :disabled="disabled">
            <a-select-option value="空闲">空闲</a-select-option>
            <a-select-option value="已满">已满</a-select-option>
            <a-select-option value="维修中">维修中</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="面积(m²)">
          <a-input-number v-decorator="['area']" :min="1" :precision="2" style="width: 100%" :disabled="disabled" />
        </a-form-item>
        
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="设施配置">
          <a-textarea placeholder="请输入设施配置情况" v-decorator="['facilities']" :rows="2" :disabled="disabled" />
        </a-form-item>
        
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="描述">
          <a-textarea placeholder="请输入描述" v-decorator="['description']" :rows="2" :disabled="disabled" />
        </a-form-item>
        
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"

  export default {
    name: "DormitoryRoomModal",
    data () {
      return {
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
        },
        url: {
          add: "/dormitory/room/add",
          edit: "/dormitory/room/edit",
        },
        buildingList: [],
        disabled: false
      }
    },
    created () {
      this.loadBuildingList();
    },
    methods: {
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.disabled = false;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'buildingId','roomCode','floor','roomType','bedCount','usedBeds','status','area','facilities','description'))
        });
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
              method = 'put';
            }
            let formData = Object.assign(this.model, values);
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }
        })
      },
      handleCancel () {
        this.close()
      },
      // 加载楼栋列表
      loadBuildingList() {
        console.log('模态框开始加载楼栋列表');
        getAction("/dormitory/building/listAll").then(res => {
          console.log('模态框楼栋列表返回结果:', res);
          if (res.success) {
            this.buildingList = res.result || [];
            console.log('模态框楼栋列表数据:', this.buildingList);
          } else {
            this.$message.warning(res.message || '加载楼栋列表失败');
          }
        }).catch(err => {
          console.error('模态框加载楼栋列表出错:', err);
          this.$message.error('加载楼栋列表出错');
        })
      },
      // 禁用提交
      disableSubmit() {
        this.disabled = true;
      }
    }
  }
</script> 